import React, { Component } from 'react'
import * as echarts from 'echarts';
import { Button, Card } from 'antd'
import './bar.css'
import { reqGetEcharts } from '../../api';

class line extends Component {
    constructor(props) {
        super();
        this.state = {
            card: {
                title: (<><Button type="primary">更新</Button></>)
            },
            option: {
                yAxis: {
                    type: 'value'
                }
            }
        }
    }
    setData = async () => {
        let res = await reqGetEcharts(); //series
        res.data.series[0].type = 'line';
        this.setState({
            option: {
                ...this.state.option,
                xAxis: res.data.xAxis,
                series: res.data.series
            }
        }, () => {
            var mychart = echarts.init(document.getElementById('main'))
            mychart.setOption(this.state.option)
        })
    }
    componentDidMount() {
        this.setData()
    }
    render() {
        return (
            <Card title={this.state.card.title} style={{ width: '100%', height: '100%' }}>
                <div id='main' style={{ width: '90%', height: '90%' }}> </div>
            </Card>
        );
    }
}

export default line;                 